<template>
  <el-dialog
    :close-on-click-modal="false"
    v-model="visibleDialog"
    title="外协供应商"
    :destroy-on-close="true"
    draggable
    :align-center="true"
    style="width: 1300px; height: 700px"
  >
    <el-row>
      <el-col :span="17">
        <el-form
          ref="formRef"
          :model="formData"
          label-width="90"
          style="width: 100%"
        >
          <div>
            <el-form :model="searchParam" :inline="true">
              <el-form-item label="供应商编号">
                <el-input
                  v-model="searchParam.partnerCode"
                  placeholder="请输入供应商编号"
                  clearable
                  @keyup.enter="search"
                />
              </el-form-item>

              <el-form-item label="供应商名称">
                <el-input
                  v-model="searchParam.partnerName"
                  placeholder="请输入供应商名称"
                  clearable
                  @keyup.enter="search"
                />
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="search"
                  ><i-ep-search />搜索</el-button
                >
                <el-button @click="reset"><i-ep-refresh />重置</el-button>
              </el-form-item>
            </el-form>
          </div>

          <el-table
            ref="dataTableRef"
            :data="tableData"
            highlight-current-row
            border
            :cell-style="{ 'text-align': 'center' }"
            style="height: 360px"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column
              label="供应商号"
              align="center"
              prop="partnerCode"
              min-width="100"
            />
            <el-table-column
              label="供应商名"
              align="center"
              prop="partnerName"
              min-width="100"
            />
            <el-table-column
              label="供应商类型"
              align="center"
              prop="hourlyCapacity"
              min-width="100"
            />
          </el-table>
          <el-pagination
            :background="true"
            :current-page="pageable.pageNum"
            :page-size="pageable.pageSize"
            :page-sizes="[10, 25, 50, 100]"
            :total="pageable.total"
            layout="total, sizes, prev, pager, next, jumper"
            class="mt-[20px]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
          <div style="float: right">
            <el-button
              type="primary"
              :disabled="ids.length === 0"
              style="margin-bottom: 10px"
              @click="selected"
              >选中 >></el-button
            >
          </div>
        </el-form>
      </el-col>
      <el-col :span="1" />
      <el-col :span="6">
        <div>
          <el-form :inline="true">
            <el-form-item label=" " style="" />
          </el-form>
        </div>
        <el-table
          ref="selectedTableRef"
          :data="formData.listSupplier"
          highlight-current-row
          border
          :cell-style="{ 'text-align': 'center' }"
          style="height: 420px"
        >
          <el-table-column
            label="已选中的供应商"
            align="center"
            prop="supplierName"
            min-width="100"
          >
            <template #header>
              <div style="color: #1d1f24">已选中的供应商</div>
            </template>
          </el-table-column>
          <el-table-column
            label=""
            align="center"
            prop="partnerCode"
            min-width="30"
          >
            <template #header>
              <el-button type="danger" size="small" link @click="removeAll"
                ><i-ep-delete
              /></el-button>
            </template>
            <template #default="scope">
              <el-button
                type="danger"
                size="small"
                link
                @click="removeItem(scope.row.supplierId)"
                ><i-ep-close
              /></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import useEvent from "@/utils/useEvent";
import { productionVersionHook } from "@/views/mes/produceVersion/hook/productionVersionHook";
import request from "@/utils/request";
import { ElForm } from "element-plus";
import { useTable } from "@/utils/useTable";

const { eventBusEmit, eventBusOn } = useEvent();
const { event, api } = productionVersionHook();
defineOptions({
  name: "PRODUCTIONVERSIONSUPPLIERDIALOG",
  inheritAttrs: false,
});
const visibleDialog = ref(false);

const rowData = ref(null);

const dataTableRef = ref();
//获取表格数据 api 方法
const requestApi = "/mdm/mdmpartner/queryByPage";
//获取数据初始化参数
const initParam = {};
const searchParamInit = {
  partnerCode: "",
  partnerName: "",
};
// 初始化搜索参数数据
// 初始化搜索参数数据
// 是否需要分页
const pagination = true;
// 无需二次数据处理&不传赞数也行
const dataCallBack = (data: any, parentIndex = "") => {
  return data;
};

// 数据请求错误后处理
function requestError() {}
//删除
const deleteParam = {
  api: "",
  data: {},
};

const {
  tableData,
  pageable,
  searchParam,
  ids,
  selections,
  getTableList,
  search,
  reset,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange,
  handleTableDelete,
  loading,
}: any = useTable(
  requestApi,
  initParam,
  searchParamInit,
  pagination,
  dataCallBack.value,
  requestError,
  deleteParam
);

const closeDialog = () => {
  visibleDialog.value = false;
  resetForm();
};

onMounted(() => {
  eventBusOn(event.supplier, (row) => {
    visibleDialog.value = true;
    rowData.value = row;
    formData.listSupplier = row.listSupplier
      ? JSON.parse(JSON.stringify(row.listSupplier))
      : [];
    getTableList();
  });
});
const formData = reactive({
  listSupplier: [],
});

const selected = () => {
  if (!ids.value || ids.value.length === 0) {
    ElMessage.error("请选择供应商");
    return;
  }
  const exist = formData.listSupplier.map((item) => item.supplierId);
  formData.listSupplier.push(
    ...selections.value
      .filter((item) => !exist.includes(item.id))
      .map((item: any) => ({
        supplierId: item.id,
        supplierCode: item.partnerCode,
        supplierName: item.partnerName,
      }))
  );
};

const removeAll = () => {
  formData.listSupplier = [];
};

const removeItem = (id: string) => {
  formData.listSupplier = formData.listSupplier.filter(
    (item: any) => item.supplierId !== id
  );
};

const resetForm = () => {
  formData.listSupplier = [];
  rowData.value = null;
};

const submit = () => {
  rowData.value.listSupplier = formData.listSupplier;
  eventBusEmit(event.workerSubmit);
  closeDialog();
};
</script>
